<!doctype html>
<html>
    <head>
        <title>HT for Web 灯光手册</title>
        <meta charset="UTF-8">    
        <meta name="viewport" content="user-scalable=yes, width=1024">
        <style type="text/css"> 
            h1, h2, h3, h4, h5, h6, p, blockquote {
                margin: 0;
                padding: 0;
            }
            body {
                font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", Arial, sans-serif;
                font-size: 13px;
                line-height: 18px;
                color: #737373;
                background-color: white; 
                margin: 10px 13px 10px 13px;
            }
            table {
                margin: 10px 0 15px 0;
                border-collapse: collapse;
            }
            td,th {	
                border: 1px solid #ddd;
                padding: 3px 10px;
            }
            th {
                padding: 5px 10px;	
            }
            a {
                color: #0069d6;
            }
            a:hover {
                color: #0050a3;
                text-decoration: none;
            }
            a img {
                border: none;
            }
            p {
                margin-bottom: 9px;
            }
            h1, h2, h3, h4, h5, h6 {
                color: #404040;
                line-height: 36px;
            }
            h1 {
                margin-bottom: 18px;
                font-size: 30px;
            }
            h2 {
                font-size: 24px;
            }
            h3 {
                font-size: 18px;
            }
            h4 {
                font-size: 16px;
            }
            h5 {
                font-size: 14px;
            }
            h6 {
                font-size: 13px;
            }
            hr {
                margin: 0 0 19px;
                border: 0;
                border-bottom: 1px solid #ccc;
            }
            blockquote {
                padding: 13px 13px 21px 15px;
                margin-bottom: 18px;
                font-family:georgia,serif;
                font-style: italic;
            }
            blockquote:before {
                content:"\201C";
                font-size:40px;
                margin-left:-10px;
                font-family:georgia,serif;
                color:#eee;
            }
            blockquote p {
                font-size: 14px;
                font-weight: 300;
                line-height: 18px;
                margin-bottom: 0;
                font-style: italic;
            }
            code, pre {
                font-family: Monaco, Andale Mono, Courier New, monospace;
            }
            code {
                background-color: #fee9cc;
                color: rgba(0, 0, 0, 0.75);
                padding: 1px 3px;
                font-size: 12px;
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
                border-radius: 3px;
            }
            pre {
                display: block;
                padding: 14px;
                margin: 0 0 18px;
                line-height: 16px;
                font-size: 11px;
                border: 1px solid #d9d9d9;
                white-space: pre-wrap;
                word-wrap: break-word;
            }
            pre code {
                background-color: #fff;
                color:#737373;
                font-size: 11px;
                padding: 0;
            }
            sup {
                font-size: 0.83em;
                vertical-align: super;
                line-height: 0;
            }
            * {
                -webkit-print-color-adjust: exact;
            }
            @media screen and (min-width: 914px) {
                body {
                    width: 854px;
                    margin:10px auto;
                }
            }
            @media print {
                body,code,pre code,h1,h2,h3,h4,h5,h6 {
                    color: black;
                }
                table, pre {
                    page-break-inside: avoid;
                }
            }                        
            iframe{
                width: 100%;
                border: 1px solid #34495E;
                margin: 0;                
            }            
            .logo{
                vertical-align: middle;
            }

        </style>        
        <script>
            function init() {
                var logoSrc = '',
                    logos = document.querySelectorAll('.logo'),
                    i = 0;
                for (; i < logos.length; i++) {
                    logos[i].src = logoSrc;
                }
                
                var iframes = document.querySelectorAll('iframe'),
                    func = function(){};
                for (i=0; i < iframes.length; i++) {
                    var iframe = iframes[i];
                    
                    // a small hack to make it work on android
                    iframe.ontouchstart = func;
                    
                    var div = document.createElement('div');
                    div.innerHTML = '<a href="' + iframe.src + '" target="_blank">独立运行→</a>';
                    iframe.parentNode.insertBefore(div, iframe);
                }   
            }
        </script>    
    </head>
    <body onload="init();">
        <a href="http://www.hightopo.com"><img class="logo"></a>HT for Web 灯光手册
        <hr style="margin: 1px 0 20px 0">
<p>索引</p>

<ul><li><a href="#ref_overview">概述</a></li><li><a href="#ref_headlight">头灯</a></li><li><a href="#ref_light">灯对象</a><ul><li><a href="#ref_pointlight">点光灯</a></li><li><a href="#ref_spotlight">聚光灯</a></li><li><a href="#ref_directionallight">方向光</a></li></ul></li><li><a href="#ref_fog">雾</a>    </li></ul>

<hr/>

<div id="ref_overview"></div>

<h2>概述</h2>

<p>构建<code>3D</code>的场景除了创建模型，对模型设置颜色和贴图外，还需要有灯光的效果才能更逼真的反映真实世界的场景。
本手册将深入介绍<a href="#ref_headlight">头灯</a>、<a href="#ref_pointlight">点光灯</a>、<a href="#ref_spotlight">聚光灯</a>
和<a href="#ref_directionallight">方向光</a>等光源的各种配置参数，以及雾化等效果。</p>

<p><iframe src="examples/example_flowing.html" style="height:460px"></iframe></p>

<div id="ref_headlight"></div>

<h2>头灯</h2>

<p><code>HT</code>默认内置了一盏头灯，头灯相当于在<code>graph3dView.getEye()</code>的眼睛位置有一个<a href="#ref_pointlight">点光灯</a>，
该灯源的位置随<code>graph3dView.getEye()</code>自定变化，因此用户即使不做任何灯光设置，漫游到任何位置都能体验到基本光照效果。</p>

<p><code>Graph3dView</code>通过以下参数控制头灯：</p>

<ul><li><code>headlightRange</code>：灯影响范围，默认为<code>0</code>代表可照射到无穷远处，如果设置了值则光照射效果随物体远离光影而衰减</li><li><code>headlightColor</code>：灯颜色</li><li><code>headlightIntensity</code>：灯强度，默认为<code>1</code>，大于<code>1</code>增强，小于<code>1</code>减弱</li><li><code>headlightDisabled</code>：关闭灯光效果，默认为<code>false</code>，可设置为<code>true</code>关闭灯效果</li></ul>

<p><iframe src="examples/example_headlight.html" style="height:460px"></iframe></p>

<div id="ref_light"></div>

<h2>灯对象</h2>

<p><code>HT</code>提供了<code>ht.Light</code>类型的图元，该类型继承于<code>ht.Node</code>，通过创建<code>ht.Light</code>类型的图元对象，
然后添加到<code>DataModel</code>数据模型达到添加灯的效果。以下介绍的<a href="#ref_pointlight">点光灯</a>、<a href="#ref_spotlight">聚光灯</a>
和<a href="#ref_directionallight">方向光</a>等光源类型都是通过<code>ht.Light</code>对象控制，以下为灯光类型共同的<code>style</code>属性：</p>

<ul><li><code>light.type</code>：默认为<code>point</code>点光灯，可设置为<code>spot</code>聚光灯，以及<code>directional</code>的方向光类型</li><li><code>light.color</code>：灯颜色</li><li><code>light.intensity</code>：灯强度，默认为<code>1</code>，大于<code>1</code>增强，小于<code>1</code>减弱</li><li><code>light.disabled</code>：关闭灯光效果，默认为<code>false</code>，可设置为<code>true</code>关闭灯效果</li></ul>

<blockquote><p>同<code>DataModel</code>中删除<code>ht.Light</code>对象，与将<code>light.disabled</code>属性设置为<code>false</code>都能得到关闭灯光效果，
但从<code>DataModel</code>中删除操作较重，建议在长时间不使用灯光时采用删除方式，如果要实现闪烁等频繁变化效果时，
建议通过<code>light.disabled</code>控制较为高效。</p></blockquote>

<div id="ref_pointlight"></div>

<h3>点光灯</h3>

<p>点灯光从它的位置各个方向发出光线，影响其长度范围内的所有对象。</p>

<ul><li>点光灯的光源位置通过<code>ht.Light</code>对象的中心位置决定，即<code>light.p3()</code>值</li><li><code>light.range</code>：灯影响范围，默认为<code>0</code>代表可照射到无穷远处，如果设置了值则光照射效果随物体远离光影而衰减</li></ul>

<p><iframe src="examples/example_pointlight.html" style="height:460px"></iframe></p>

<div id="ref_spotlight"></div>

<h3>聚光灯</h3>

<p>聚光灯从它所在位置，以到中心点的位置为方向，在指定的张角和长度范围内的对象受其影响。</p>

<ul><li>聚光灯的光源位置通过<code>ht.Light</code>对象的中心位置决定，即<code>light.p3()</code>值</li><li><code>light.center</code>：光源照射方向的中心点位置，默认为原点<code>[0, 0, 0]</code></li><li><code>light.range</code>：灯影响范围，默认为<code>0</code>代表可照射到无穷远处，如果设置了值则光照射效果随物体远离光影而衰</li><li><code>light.angle</code>：灯照射的张角弧度，该张角照射范围内物体才受此光源影响</li><li><code>light.exponent</code>：灯光照射衰减指数，默认值为<code>0</code>，值越大离中心方向越远的物体受光照影响效果越弱</li></ul>

<p><iframe src="examples/example_spotlight.html" style="height:460px"></iframe></p>

<div id="ref_directionallight"></div>

<h3>方向光</h3>

<p>方向光源在无穷远处，以指定的方向照射到场景内的所有物体，太阳光就是这类光的应用。</p>

<ul><li>方向光的光照方向通过<code>ht.Light</code>对象中心点到三维坐标原点<code>[0, 0, 0]</code>得矢量方向决定，
因此改变灯对象的中心点位置即可改变光照方向。</li></ul>

<p><iframe src="examples/example_directionallight.html" style="height:460px"></iframe></p>

<div id="ref_fog"></div>

<h3>雾</h3>

<p><code>HT</code>提供了使场景呈现笼罩在雾化的环境效果，<code>Graph3dView</code>通过以下参数进行控制：</p>

<ul><li><code>fogDisabled</code>：默认为<code>true</code>不启用雾效果，可设置为<code>true</code>启用雾效果</li><li><code>fogColor</code>：雾颜色</li><li><code>fogNear</code>：默认为<code>1</code>，代表从该距离起物体开始受雾效果影响</li><li><code>fogFar</code>：默认为<code>2000</code>，代表从该距离之后物体完全看不清</li></ul>

<p><iframe src="examples/example_fog.html" style="height:460px"></iframe></p>    <hr id="contact" style="margin: 20px 0 1px 0">
    <a href="http://www.hightopo.com"><img class="logo"></a>欢迎交流 <a href="mailto:service@hightopo.com">service@hightopo.com</a>
</body>
</html>
